* {
    margin: 0;
    padding: 0;
}

a {
    -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
}

body {
    overflow-x: hidden;
    -webkit-user-select: none;
    -webkit-text-size-adjust: none;
    font-family: Helvetica;
    -webkit-perspective: 800;
    -webkit-transform-style: preserve-3d;
}

.selectable, input, textarea {
    -webkit-user-select: auto;
}

body > * {
    -webkit-backface-visibility: hidden;
    -webkit-box-sizing: border-box;
    display: none;
    position: absolute;
    left: 0;
    width: 100%;
    -webkit-transform: translate3d( 0, 0, 0 ) rotate( 0 ) scale( 1 );
    min-height: 420px !important;
}

body.fullscreen > * {
    min-height: 460px !important;
}

body.fullscreen.black-translucent > * {
    min-height: 480px !important;
}

body.landscape > * {
    min-height: 320px;
}

body > .current {
    display: block !important;
}

.in, .out {
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 350 ms;
}

.slide.in {
    -webkit-animation-name: slideinfromright;
}

.slide.out {
    -webkit-animation-name: slideouttoleft;
}

.slide.in.reverse {
    -webkit-animation-name: slideinfromleft;
}

.slide.out.reverse {
    -webkit-animation-name: slideouttoright;
}

@-webkit-keyframes
slideinfromright
{
from
{
-webkit-transform
:
translateX
(
100
%
)
;
}
to
{
-webkit-transform
:
translateX
(
0
)
;
}
}

@-webkit-keyframes
slideinfromleft
{
from
{
-webkit-transform
:
translateX
(
-
100
%
)
;
}
to
{
-webkit-transform
:
translateX
(
0
)
;
}
}

@-webkit-keyframes
slideouttoleft
{
from
{
-webkit-transform
:
translateX
(
0
)
;
}
to
{
-webkit-transform
:
translateX
(
-
100
%
)
;
}
}

@-webkit-keyframes
slideouttoright
{
from
{
-webkit-transform
:
translateX
(
0
)
;
}
to
{
-webkit-transform
:
translateX
(
100
%
)
;
}
}

@-webkit-keyframes
fadein
{
from
{
opacity
:
0
;
}
to
{
opacity
:
1
;
}
}

@-webkit-keyframes
fadeout
{
from
{
opacity
:
1
;
}
to
{
opacity
:
0
;
}
}

.fade.in {
    z-index: 10;
    -webkit-animation-name: fadein;
}

.fade.out {
    z-index: 0;
}

.dissolve.in {
    -webkit-animation-name: fadein;
}

.dissolve.out {
    -webkit-animation-name: fadeout;
}

.flip {
    -webkit-animation-duration: .65 s;
}

.flip.in {
    -webkit-animation-name: flipinfromleft;
}

.flip.out {
    -webkit-animation-name: flipouttoleft;
}

/* Shake it all about */

.flip.in.reverse {
    -webkit-animation-name: flipinfromright;
}

.flip.out.reverse {
    -webkit-animation-name: flipouttoright;
}

@-webkit-keyframes
flipinfromright
{
from
{
-webkit-transform
:
rotateY
(
-
180
deg
)
scale
(
.8
)
;
}
to
{
-webkit-transform
:
rotateY
(
0
)
scale
(
1
)
;
}
}

@-webkit-keyframes
flipinfromleft
{
from
{
-webkit-transform
:
rotateY
(
180
deg
)
scale
(
.8
)
;
}
to
{
-webkit-transform
:
rotateY
(
0
)
scale
(
1
)
;
}
}

@-webkit-keyframes
flipouttoleft
{
from
{
-webkit-transform
:
rotateY
(
0
)
scale
(
1
)
;
}
to
{
-webkit-transform
:
rotateY
(
-
180
deg
)
scale
(
.8
)
;
}
}

@-webkit-keyframes
flipouttoright
{
from
{
-webkit-transform
:
rotateY
(
0
)
scale
(
1
)
;
}
to
{
-webkit-transform
:
rotateY
(
180
deg
)
scale
(
.8
)
;
}
}

.slideup.in {
    -webkit-animation-name: slideup;
    z-index: 10;
}

.slideup.out {
    -webkit-animation-name: dontmove;
    z-index: 0;
}

.slideup.out.reverse {
    z-index: 10;
    -webkit-animation-name: slidedown;
}

.slideup.in.reverse {
    z-index: 0;
    -webkit-animation-name: dontmove;
}

@-webkit-keyframes
slideup
{
from
{
-webkit-transform
:
translateY
(
100
%
)
;
}
to
{
-webkit-transform
:
translateY
(
0
)
;
}
}

@-webkit-keyframes
slidedown
{
from
{
-webkit-transform
:
translateY
(
0
)
;
}
to
{
-webkit-transform
:
translateY
(
100
%
)
;
}
}

/* Hackish, but reliable. */

@-webkit-keyframes
dontmove
{
from
{
opacity
:
1
;
}
to
{
opacity
:
1
;
}
}

.swap {
    -webkit-transform: perspective( 800 );
    -webkit-animation-duration: .7 s;
}

.swap.out {
    -webkit-animation-name: swapouttoleft;
}

.swap.in {
    -webkit-animation-name: swapinfromright;
}

.swap.out.reverse {
    -webkit-animation-name: swapouttoright;
}

.swap.in.reverse {
    -webkit-animation-name: swapinfromleft;
}

@-webkit-keyframes
swapouttoright
{
0
%
{
-webkit-transform
:
translate3d
(
0
px
,
0
px
,
0
px
)
rotateY
(
0
deg
)
;
-webkit-animation-timing-function
:
ease-in-out
;
}
50
%
{
-webkit-transform
:
translate3d
(
-
180
px
,
0
px
,
-
400
px
)
rotateY
(
20
deg
)
;
-webkit-animation-timing-function
:
ease-in
;
}
100
%
{
-webkit-transform
:
translate3d
(
0
px
,
0
px
,
-
800
px
)
rotateY
(
70
deg
)
;
}
}

@-webkit-keyframes
swapouttoleft
{
0
%
{
-webkit-transform
:
translate3d
(
0
px
,
0
px
,
0
px
)
rotateY
(
0
deg
)
;
-webkit-animation-timing-function
:
ease-in-out
;
}
50
%
{
-webkit-transform
:
translate3d
(
180
px
,
0
px
,
-
400
px
)
rotateY
(
-
20
deg
)
;
-webkit-animation-timing-function
:
ease-in
;
}
100
%
{
-webkit-transform
:
translate3d
(
0
px
,
0
px
,
-
800
px
)
rotateY
(
-
70
deg
)
;
}
}

@-webkit-keyframes
swapinfromright
{
0
%
{
-webkit-transform
:
translate3d
(
0
px
,
0
px
,
-
800
px
)
rotateY
(
70
deg
)
;
-webkit-animation-timing-function
:
ease-out
;
}
50
%
{
-webkit-transform
:
translate3d
(
-
180
px
,
0
px
,
-
400
px
)
rotateY
(
20
deg
)
;
-webkit-animation-timing-function
:
ease-in-out
;
}
100
%
{
-webkit-transform
:
translate3d
(
0
px
,
0
px
,
0
px
)
rotateY
(
0
deg
)
;
}
}

@-webkit-keyframes
swapinfromleft
{
0
%
{
-webkit-transform
:
translate3d
(
0
px
,
0
px
,
-
800
px
)
rotateY
(
-
70
deg
)
;
-webkit-animation-timing-function
:
ease-out
;
}
50
%
{
-webkit-transform
:
translate3d
(
180
px
,
0
px
,
-
400
px
)
rotateY
(
-
20
deg
)
;
-webkit-animation-timing-function
:
ease-in-out
;
}
100
%
{
-webkit-transform
:
translate3d
(
0
px
,
0
px
,
0
px
)
rotateY
(
0
deg
)
;
}
}

.cube {
    -webkit-animation-duration: .55 s;
}

.cube.in {
    -webkit-animation-name: cubeinfromright;
    -webkit-transform-origin: 0% 50%;
}

.cube.out {
    -webkit-animation-name: cubeouttoleft;
    -webkit-transform-origin: 100% 50%;
}

.cube.in.reverse {
    -webkit-animation-name: cubeinfromleft;
    -webkit-transform-origin: 100% 50%;
}

.cube.out.reverse {
    -webkit-animation-name: cubeouttoright;
    -webkit-transform-origin: 0% 50%;

}

@-webkit-keyframes
cubeinfromleft
{
from
{
-webkit-transform
:
rotateY
(
-
90
deg
)
translateZ
(
320
px
)
;
opacity
:
.5
;
}
to
{
-webkit-transform
:
rotateY
(
0
deg
)
translateZ
(
0
)
;
opacity
:
1
;
}
}
@-webkit-keyframes
cubeouttoright
{
from
{
-webkit-transform
:
rotateY
(
0
deg
)
translateX
(
0
)
;
opacity
:
1
;
}
to
{
-webkit-transform
:
rotateY
(
90
deg
)
translateZ
(
320
px
)
;
opacity
:
.5
;
}
}
@-webkit-keyframes
cubeinfromright
{
from
{
-webkit-transform
:
rotateY
(
90
deg
)
translateZ
(
320
px
)
;
opacity
:
.5
;
}
to
{
-webkit-transform
:
rotateY
(
0
deg
)
translateZ
(
0
)
;
opacity
:
1
;
}
}
@-webkit-keyframes
cubeouttoleft
{
from
{
-webkit-transform
:
rotateY
(
0
deg
)
translateZ
(
0
)
;
opacity
:
1
;
}
to
{
-webkit-transform
:
rotateY
(
-
90
deg
)
translateZ
(
320
px
)
;
opacity
:
.5
;
}
}

.pop {
    -webkit-transform-origin: 50% 50%;
}

.pop.in {
    -webkit-animation-name: popin;
    z-index: 10;
}

.pop.out.reverse {
    -webkit-animation-name: popout;
    z-index: 10;
}

.pop.in.reverse {
    z-index: 0;
    -webkit-animation-name: dontmove;
}

@-webkit-keyframes
popin
{
from
{
-webkit-transform
:
scale
(
.2
)
;
opacity
:
0
;
}
to
{
-webkit-transform
:
scale
(
1
)
;
opacity
:
1
;
}
}

@-webkit-keyframes
popout
{
from
{
-webkit-transform
:
scale
(
1
)
;
opacity
:
1
;
}
to
{
-webkit-transform
:
scale
(
.2
)
;
opacity
:
0
;
}
}